<script lang="ts" setup>
import { Message } from '@arco-design/web-vue';
import { ref } from 'vue';

// 题目类型定义
interface Question {
  id: number;
  content: string;
}

// 题库类型定义
interface QuestionBank {
  id: number;
  questions: Question[];
}

// 本地存储键名
const STORAGE_KEY = 'question_banks_data';

// 从本地存储加载题库数据
function loadFromLocalStorage(): QuestionBank[] {
  const data = localStorage.getItem(STORAGE_KEY);
  return data ? JSON.parse(data) : [];
}

// 题库数据
const questionBanks = ref<QuestionBank[]>(loadFromLocalStorage());

// 当前激活的题库索引
const activeTab = ref(0);

// 已选择的题目
const selectedQuestions = ref<number[][]>(questionBanks.value.map(() => []));

/**
 * 获取当前题库最大可选数量
 * @param index 题库索引
 * @returns 最大可选数量
 */
function getMaxSelection(index: number) {
  return index === questionBanks.value.length - 1 ? 5 : 1;
}

/**
 * 下一题
 */
function next() {
  if (activeTab.value < questionBanks.value.length - 1) {
    activeTab.value++;
  } else {
    Message.success('已完成所有题目');
  }
}
</script>

<template>
  <div class="question-container">
    <a-tabs v-model:active-key="activeTab" type="rounded">
      <a-tab-pane v-for="(bank, index) in questionBanks" :key="index" :title="`题库${index + 1}`">
        <div class="question-list">
          <a-checkbox-group
            v-model:model-value="selectedQuestions[index]"
            :max="getMaxSelection(index)"
            direction="vertical"
          >
            <a-checkbox
              v-for="(question, qIndex) in bank.questions"
              :key="qIndex"
              :value="qIndex"
              class="question-item"
            >
              {{ qIndex + 1 }}. {{ question.content }}
            </a-checkbox>
          </a-checkbox-group>
        </div>
      </a-tab-pane>
    </a-tabs>

    <div class="submit-area">
      <a-button type="primary" @click="next">下一题</a-button>
    </div>
    <div class="submit-area">
      <RouterLink to="/questions">
        <a-button type="dashed">修改题库</a-button>
      </RouterLink>
    </div>
  </div>
</template>

<style scoped>
.question-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  height: 100%;
  overflow: auto;
}

.question-list {
  margin-top: 16px;
}

.question-item {
  display: block;
  margin-bottom: 12px;
  padding: 8px 12px;
  background-color: #f7f8fa;
  border-radius: 4px;
}

.submit-area {
  margin-top: 20px;
  text-align: center;
}
</style>
